<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>对账管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../elementUI/index.css">
    <link rel="stylesheet" href="../../../css/index.css">
</head>

<body>
    <div id="app" class="minWidth">
        <el-form :inline="true" :form="form">
            <el-form-item label="经销商:">
                <el-select placeholder="请选择经销商" clearable filterable v-model.trim="form.Store_SerialNumber" @change="handleclassify">
                    <el-option v-for="(item,index) in dealer" :key="index" :label="item.Dealer_Name" :value="item.Tax_Number"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品名称:">
                <el-input v-model.trim="form.Article_Name" @change="handleclassify" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item label="时间范围:">
                <el-date-picker v-model="time" style="margin-right: 20px;" value-format="yyyy-MM-dd"
                    @change="DateChange" type="daterange" align="center" unlink-panels range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
        </el-form>
        <div>
            <el-col :span="8" style="width: 33.3%;">
                <el-card shadow="hover" style="margin: 30px;">
                    <h3>销售应收:￥{{thousands(Number(Data.Sales_Amount))}}</h3>
                </el-card>
            </el-col>
            <el-col :span="8" style="width: 33.3%;">
                <el-card shadow="hover" style="margin: 30px;">
                    <h3>销售已收:￥{{thousands(Number(Data.Collection_Amount))}}</h3>
                </el-card>
            </el-col>
            <el-col :span="8" style="width: 33.3%;">
                <el-card shadow="hover" style="margin: 30px;">
                    <h3>待收金额:￥{{thousands(Number(Data.Sales_Amount)-Number(Data.Collection_Amount))}}</h3>
                </el-card>
            </el-col>
        </div>
        <el-table height="calc(100vh - 300px)" :data="tableData" stripe border style="width: 100%" @expand-change="handleExpandChange" >
            <el-table-column type="expand" align="center" width="50">
                <template slot-scope="scope">
                    <el-table :data="scope.row.Children.sales_order_detail" style="margin: 5px auto 0; width: 98%;" border>
                        <el-table-column type="index" align="center" width="50" label="序号"></el-table-column>
                        <el-table-column align="center" prop="Sales_Order_Detail_SerialNumber" label="明细流水号"></el-table-column>
                        <el-table-column align="center" prop="Article_Name" label="商品名称"></el-table-column>
                        <el-table-column align="center" prop="Picture_URL" label="商品图片">
                            <template v-slot="{row}">
                                <div v-if="row.Picture_URL != '/'&&row.Picture_URL != '/'">
                                  <el-image style="width: 100px; height: 100px; border-radius: 9px;cursor: pointer;" fit="fill"
                                    :src="DomainIMG + row.Picture_URL"></el-image>
                                </div>
                                <div v-else>暂无封面</div>
                              </template>
                        </el-table-column>
                        <el-table-column align="center" prop="Sales_Unit_Price" label="单价"></el-table-column>
                        <el-table-column align="center" prop="Quantity" label="数量"></el-table-column>
                        <el-table-column align="center" prop="Amount" label="合计"></el-table-column>
                        <el-table-column align="center" prop="Order_Type" label="类型">
                            <template v-slot="{row}">
                                <el-tag :type="row.Order_Type=='0'?'success':'primary'">{{row.Order_Type=='0'?'正常商品':'赠品'}}</el-tag>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column type="index" align="center" width="50" label="序号"></el-table-column>
            <el-table-column prop="Collection_SerialNumber" align="center" label="流水号"></el-table-column>
            <el-table-column prop="Collection_Date" align="center" label="下单时间"></el-table-column>
            <el-table-column prop="Article_Name" align="center" label="包含商品"></el-table-column>
            <el-table-column align="center" label="状态">
                <template  v-slot="{row}">
                    <el-tag :type="row.Row_Status=='0'?'primary':row.Row_Status=='1'||row.Row_Status=='4'?'success':'danger'">
                        {{row.Row_Status=='0'?'未收款':row.Row_Status=='1'?'已收款':row.Row_Status=='4'?'已传发票':'已作废'}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="Sales_Amount" align="center" label="应收金额">
                <template v-slot="{row}">
                    {{thousands(Number(row.Sales_Amount))}}
                </template>
            </el-table-column>
            <el-table-column prop="Collection_Amount" align="center" label="实收金额">
                <template v-slot="{row}">
                    {{thousands(Number(row.Collection_Amount))}}
                </template>
            </el-table-column>
            <el-table-column  align="center" label="待收金额">
                <template v-slot="{row}">
                    <span :style="(Number(row.Sales_Amount).toFixed(2))-(Number(row.Collection_Amount).toFixed(2))!=0?'color:green':''">
                        {{thousands((Number(row.Sales_Amount).toFixed(2))-(Number(row.Collection_Amount).toFixed(2)))}}
                    </span>  
                </template>
            </el-table-column>
            <el-table-column prop="Dealer_Name" align="center" label="经营方"></el-table-column>
            <el-table-column align="center" label="操作">
                <template v-slot="{row}">
                    <div style="display: flex;" v-if="row.Store_SerialNumber.charAt(0)!='E'">
                        <el-button type="success" v-if="row.Row_Status=='0'" size="small" @click="handleCollection(row)">收款</el-button>
                        <el-button type="success" v-else-if="row.Row_Status=='1'||row.Row_Status=='4'" size="small" @click="handle(row)">查看</el-button>
                        <el-button style="margin-left: 10px;"  type="primary" v-if="row.Row_Status=='1'||row.Row_Status=='4'" size="small" @click="Invoicing(row)">开票</el-button>
                    </div>
                    <div style="display: flex;" v-else>
                        <span v-if="row.Row_Status=='0'">客户下单</span>
                        <el-button type="success" v-else-if="row.Row_Status=='1'||row.Row_Status=='4'" size="small" @click="handle(row)">查看</el-button>
                        <el-button style="margin-left: 10px;" type="primary" v-if="row.Row_Status=='1'||row.Row_Status=='4'" size="small" @click="Invoicing(row)">开票</el-button>
                    </div>
                    <el-button type="success" v-if="row.Row_Status=='1'" size="small" @click="handleInvoice(row)">上传发票</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background v-show="total > 0" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="form.page" :page-sizes="[10,20,30,50]"
            :page-size="form.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>

        <el-dialog title="上传收款单" :visible.sync="dialogVisible" width="30%">
            <div style="display: flex;flex-direction: column;align-items: center;">
                <div style="display: flex;flex-direction: column;align-items: center;">
                    <div class="preview" v-if="imageUrl!=''">
                        <el-image class="el-upload-list__item-thumbnail" style="width: 148px; height: 148px" :src="imageUrl" fit="contain"></el-image>
                        <span class="el-upload-list__item-actions">
                            <span @click="handlePictureCardPreview(imageUrl)"><i class="el-icon-delete"> </i></span>
                            <span @click="handleRemove()"><i class="el-icon-delete"> </i></span>
                        </span>
                    </div>
                    <el-upload v-else class="upload-demo" :show-file-list="false" list-type="picture-card" action=""
                        accept="image/*" :before-upload="uploadImg">
                        <i slot="default"  :class="!loading?'el-icon-plus':'el-icon-loading'"></i>
                    </el-upload>
                </div>
                <div style="display: flex;">
                    <el-button type="danger" @click="()=>{this.dialogVisible = false}">取消</el-button>
                    <el-button :loading="loading" :disabled="!formData.Picture_URL" type="success" @click="submitImg()">确认</el-button>
                </div>
            </div>
        </el-dialog>
        <!-- 上传发票 -->
        <el-dialog title="上传发票" :visible.sync="dialogInvoice" width="30%">
            <div style="display: flex;flex-direction: column;align-items: center;">
                <div style="display: flex;flex-wrap: wrap;width: 450px;">
                    <div class="preview"  v-for="(item, index) in invoice" :key="index">
                        <el-image class="el-upload-list__item-thumbnail" style="width: 148px; height: 148px" :src="item.src" fit="contain"></el-image>
                        <span class="el-upload-list__item-actions">
                            <span @click="handlePictureCardPreview(item.src)"><i class="el-icon-delete"> </i></span>
                            <span @click="handleRemove()"><i class="el-icon-delete"> </i></span>
                        </span>
                    </div>
                    <el-upload class="upload-demo" :show-file-list="false" list-type="picture-card" action=""
                        accept="image/*" :before-upload="uploadinvoice">
                        <i slot="default"  class="el-icon-plus"></i>
                    </el-upload>
                </div>
                <div style="display: flex;">
                    <el-button type="danger" @click="()=>{this.dialogInvoice = false}">取消</el-button>
                    <el-button :loading="loading" :disabled="invoice.length==0" type="success" @click="submitInvoice()">确认</el-button>
                </div>
            </div>
        </el-dialog>
        <el-dialog title="查看付款详情" :visible.sync="dialogVisible1" width="100">
            <div style="display: flex;flex-direction: column;align-items: center;">
                <div style="display: flex;flex-direction: column;align-items: center;">
                    <el-descriptions :column="1" border size="small">
                        <el-descriptions-item label="收款类型">
                            <span style="width: 100%;">{{collection.Collection_Type}}</span>
                        </el-descriptions-item>
                        <el-descriptions-item v-if="collection.Collection_Type=='微信支付'" label="收款编号">
                            <span style="width: 100%;">{{collection.Collection_Related_Number}}</span>
                        </el-descriptions-item>
                        <el-descriptions-item v-else-if="collection.Collection_Type=='电子汇账'" label="收款单据">
                            <el-image style="height: 100px;cursor: pointer;" fit="contain" @click="handlePictureCardPreview(Domain_Business + collection.Collection_Related_Number)"
                                :src="Domain_Business + collection.Collection_Related_Number"></el-image>
                        </el-descriptions-item>
                        <el-descriptions-item label="上传发票">
                            <el-image v-for="(item,index) in collection.invoice" :key="index" style="height: 100px;cursor: pointer;" fit="contain" 
                                @click="handlePictureCardPreview(Domain_Business + item.Collection_Invoice)"
                                :src="Domain_Business + item.Collection_Invoice"></el-image>
                        </el-descriptions-item>
                    </el-descriptions>  
                    
                </div>
                <div style="display: flex;margin-top: 10px;">
                    <el-button type="danger" @click="()=>{this.dialogVisible1 = false}">取消</el-button>
                </div>
            </div>
        </el-dialog>
        <el-dialog :visible.sync="dialogImage">
            <el-image style="width: 100%;" fit="contain" :src="dialogImageUrl"></el-image>
        </el-dialog>
    </div>
    <script type="text/javascript" src="../../../js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="../../../js/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../js/vue.min.js"></script>
    <script type="text/javascript" src="../../../elementUI/index.js"></script>
    <script type="text/javascript" src="../../../js/compressor.js"></script>
    <script type="text/javascript" src="../../../js/utils.js"></script>
    <script type="text/javascript" src="../../../js/FileSaver.min.js"></script>
    <script type="text/javascript" src="../../../js/FileSaver.js"></script>
    <script type="text/javascript" src="../../../js/xlsx.full.min.js"></script>
    <script type="text/javascript" src="./js/SalesReconciliation.js"></script>
</body>

</html>